<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>商品介绍</title>
    <link rel="stylesheet" type="text/css" href="/shop/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/detail.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loading.css"/>

    <link rel="stylesheet" href="/css/newsContent.css">

    <link rel="stylesheet" href="/shop/css/swiper.min.css">
    <script src="/shop/js/rem.js"></script>
    <script src="/shop/js/jquery.min.js" type="text/javascript"></script>
    <script src="/shop/js/others.js"></script>
    <script src="/shop/js/swiper.jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>

    <script type="text/javascript">
        // 页面加载完毕
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300);
            // 获取地址栏 id 数据
            var id = getParams().id;
            // 发送请求获取商品详情
            if (id){
                // 发送请求查询商品对应的内容介绍
                $.get("/productCatalogs/products/" + id + "/content", function (data) {
                    //$(".detail").html(data.content);
                    $(".content").html(data.content);
                });
                // 本地获取商品数据
                var data = JSON.parse(sessionStorage.getItem("product"));

                // 渲染购物车数据
                $("#productImg").attr("src", data.coverUrl);
                $("#productName").html(data.productName);
                $("#productPoints").html(data.points + "积分");
            }
        });

        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }

        // 发送请求添加购物车功能
        function saveCarts() {
            // 获取商品总数
            var count = parseInt($("#count").html());
            // 获取用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            // 商品数据
            var data = JSON.parse(sessionStorage.getItem("product"));
            // 发送请求添加商品
            $.ajax({
                url:"/carts",
                type:"post",
                data:{userId:user.id, count:count, productId:data.id},
                success:function (data) {
                    if (data.success){
                        window.location.href = "/mine/shopcar.html";
                    }
                }
            });
        }





    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>商品介绍</h4>
</header>
<!--header end-->

<!--<div class="container detail">-->
    <!--<div class="detail clearfloat">-->
    <!--</div>-->

<!--</div>-->

<div class="detail">
    <!--<h2 class="title" render-html="title"></h2>-->
    <div class="content"></div>
</div>


<!--footerone star-->
<div class="footerone clearfloat">
    <div class="left clearfloat fl">
        <ul>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-shangcheng"></i>
                        <p>商城</p>
                    </a>
                </div>
            </li>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-kefu1"></i>
                        <p>客服</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="right clearfloat fl">
        <span class="btn fl" onClick="toshare()">加入购物车</span>
        <a href="confirm.html" class="btn btnone fl">立即购买</a>
    </div>
</div>
<!--footerone end-->

<!--弹出购物车内容-->
<div class="am-share">
    <div class="am-share-footer">
        <button class="share_btn"><img src="/shop/images/chahao.png"/></button>
    </div>
    <div class="am-share-sns box-s">
        <div class="sdetail clearfloat">
            <div class="top clearfloat">
                <div class="tu clearfloat fl">
                    <span></span>
                    <img src="/shop/images/xj2.jpg" id="productImg"/>
                </div>
                <div class="you clearfloat fl">
                    <p class="tit" id="productName">单反相机</p>
                    <span id="productPoints">100000积分</span>
                </div>
            </div>
            <div class="bottom clearfloat">
                <p class="fl">兑换数量</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down"><img src="/shop/images/jian.jpg"/></li>
                        <li id="count">1</li>
                        <li onclick="document.getElementById('count').innerHTML++"><img src="/shop/images/jia.jpg"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <a role="button" class="shop-btn db" id="saveBtn" onclick="saveCarts()">确定</a>
</div>
<script type="text/javascript">
    var down = document.getElementById("down");
    var count = document.getElementById("count");
    window.onload = function () {
        down.onclick = function () {
            if (count.innerHTML > 1) {
                count.innerHTML--;
            } else {
                count.innerHTML = 1;
            }
        }
        $(".middle .xia li").click(function () {
            $(this).addClass('cur').siblings().removeClass('cur');
        });

    }
</script>
<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="index.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a href="cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li>
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>

</html>
